<template>
      <!-- 有次级菜单的,则展开子选项-->
      <el-submenu class="childSubMenu" :index="String(index)" v-if="menuObj.children">
        <template slot="title">
          <i :class="menuObj.icon"></i>
          <span>{{ menuObj.name }}</span>
        </template>
        <template v-for="(item, index) in menuObj.children">
            <el-menu-item :index="item.path" :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
        </template>
    </el-submenu>
</template>
<script>
export default {
  name: "MenusTree",
  props: {
    menuObj: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
   
  },
};
</script>
<style lang="less">
.childSubMenu {
  .el-submenu__title{
    padding:0 30px 0 60px !important;
  }
  .el-submenu__icon-arrow{
    right:25px !important;
  }
  .el-menu-item{
    padding-left:75px !important;
  }
}
</style>
